<template>
  <div id="detail">
    <!-- 标题 -->
    <div class="header">
      <div class="title">这是我的第一篇博客<i>原创</i></div>
      <div class="icon-group">
        <!-- 作者 -->
        <div class="icon user">
          <font-awesome-icon :icon="['fas', 'user']" class="fa-sm"></font-awesome-icon>
          <span>zeng</span>
        </div>

        <!-- 更新时间 -->
        <div class="icon time">
          <font-awesome-icon :icon="['far', 'clock']" class="fa-sm"></font-awesome-icon>
          <span style="letter-spacing: 1px">2018-04-25</span>
        </div>

        <!-- 热度 -->
        <div class="icon hot">
          <font-awesome-icon :icon="['fas', 'fire']" class="fa-sm"></font-awesome-icon>
          <span>2</span>
        </div>

        <!-- 围观次数 -->
        <div class="icon eye">
          <font-awesome-icon :icon="['fas', 'eye']" class="fa-sm"></font-awesome-icon>
          <span>200</span>
        </div>

        <div class="icon user">
          <font-awesome-icon :icon="['fas', 'tag']" class="fa-sm"></font-awesome-icon>
          <span>前端开发</span>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="content" v-highlight>
      <h2>简介</h2>
      <p>创建 Date 实例用来处理日期和时间。<code>Date</code> 对象基于1970年1月1日（世界标准时间）起的毫秒数。</p>
      <pre>
        <code>public class Person {
      private Integer id;
}</code>
      </pre>
    </div>
    <!-- 版权声明 -->
    <div class="other">
      <div class="left fl">
        <font-awesome-icon :icon="['far', 'clock']" class="fa-sm"></font-awesome-icon>
        最后修改时间：2018-05-03
      </div>
      <el-tooltip class="item" effect="dark" content="不可以侵权的哈" placement="top">
        <div class="right fr"><i class="el-icon-warning"></i> 未经作者允许禁止转载</div>
      </el-tooltip>
    </div>
    <!-- 打赏 -->
    <div class="footer mgb15">
      <el-button type="warning" round>
        <font-awesome-icon :icon="['fas', 'heart']"></font-awesome-icon>
        我要打赏
      </el-button>
    </div>
    <!-- 评论列表 -->
    <comment :data="table_data"></comment>
    <!-- 评论 -->
    <div class="comment mgb15">
      <!-- 列表 -->
      <div>
        <div>评论：</div>
        <el-input type="textarea" class="mgb15"></el-input>
        <div style="text-align: right">
          <el-button type="success" :disabled="!isLogin">发表评论</el-button>
          <span class="warn" v-if="!isLogin">发表评论请登录！</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {Component, Model, Prop, Vue} from 'vue-property-decorator'
  import comment from '../../components/comment/index.vue'


  @Component({
    components: {
      comment
    }
  })
  export default class detail extends Vue {
    name = "detail";
    isLogin: boolean = false;

    table_data = [
      {
        img: 'https://q.qlogo.cn/g?b=qq&nk=704729872&s=40',
        username: '曾小晨',
        content: '月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美' +
        '月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮' +
        '很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美' +
        '月亮很美月亮很美月亮很美月亮很美',
        time: Date.now()
      }
    ];

    mounted() {

    };
  }
</script>

<style lang="scss">
  @import "../../assets/scss/config";

  $comment: 'comment';

  code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
    font-family: Menlo, Monaco, Consolas, Courier New, monospace;
  }

  #detail {

    .#{$comment}_img img {
      margin-top: 5px;
    }

    .#{$comment}_img, .#{$comment}_img img {
      height: 30px;
      width: 30px;
    }

    .#{$comment}_detail {
      margin-left: 40px;
      font-size: 12px;
      a {
        color: #d1694f;
      }
    }
    .#{$comment}_parent {
      @extend .#{$comment}_detail;
      padding: 5px;
      background-color: #666;
      color: #fff;
      border-radius: .25rem;
    }

    .#{$comment}-list {
      display: inline-block;
      margin: 10px 0;
      padding: 0 10px;
    }

    .#{$comment}_time {
      margin-left: 40px;
      font-size: 12px;
      color: #b0b2b7;
    }

    padding: 5px;
    width: $middle-width;
    /*min-height: 900px;*/

    .warn {
      display: block;
      font-size: 12px;
      color: #D2691E;
    }

    pre {
      font-size: 12px;
      code {
        font-family: Menlo, Monaco, Consolas, Courier New, monospace;
        word-spacing: 1px;
      }
    }

    .el-textarea__inner {
      height: 150px;
      font-size: 12px;
    }

    .mgb15 {
      margin-bottom: 15px;
    }

    h2, h3, h4, h5 {
      font-weight: 600;
      margin: 10px 0;
    }
    .left, .right {
      font-size: 12px;
      color: #9fa0a4;
    }
    .fr {
      float: right;
    }
    .fl {
      float: left;
    }
    h2 {
      font-size: 22px;
    }
    .other {
      overflow: auto;
    }
    .content {
      font-size: 13px;
      letter-spacing: 1px;
      border-bottom: 1px solid #f2f2f2;
      padding: 10px;
    }
    .footer {
      text-align: center;
    }
    .title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .icon-group {
      border-bottom: 1px solid #f2f2f2;
      font-size: 12px;
      color: #888;
      .icon {
        margin-right: 15px;
        display: inline-block;
        transition: color .3s;
      }
    }
  }

</style>
